<template>
  <div>
    <div class="form-wrap">
      <div class="link-box">
        <p class="content">链接:</p>
        <p class="content">{{url}}</p>
        <button
          class="btn-color-blue small"
          size="mini"
          @click="handleCopyToClipboard"
        >复制链接</button>
      </div>
      <button
        class="btn-round-blue action"
        size="mini"
        @click="handleGenerateNewURL"
      >生成店铺小链接</button>
      <p class="tip">点击将更换您的店铺小链接，请谨慎使用该功能</p>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import { FIND_SHOP_URL, GENERATE_SHOP_URL } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      shopURL: ''
    }
  },
  computed: {
    url () {
      if (this.shopURL) {
        return this.shopURL.replace(/=\S{10}/, '=************')
      } else {
        return ''
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.findShopURL()
  },
  methods: {
    handleCopyToClipboard () {
      const vm = this
      wx.setClipboardData({
        data: vm.shopURL,
        success (res) {
          vm.$toast('复制成功')
        }
      })
    },
    handleGenerateNewURL () {
      const vm = this

      vm
        .$dialog(
          '更换链接后之前的链接将不能继续使用，确定要重新生成链接吗？',
          '警告'
        )
        .then(r => {
          vm.generateShopURL()
        })
        .catch(e => {
          // cancel
          // do nothing
        })
    },

    findShopURL () {
      const vm = this

      let params = {
        shopId: vm.$store.state.account.shopId,
        isOffline: false
      }

      FIND_SHOP_URL(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.shopURL = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    generateShopURL () {
      const vm = this

      let params = {
        shopId: vm.$store.state.account.shopId,
        isOffline: false
      }

      GENERATE_SHOP_URL(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.shopURL = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.form-wrap {
  > .link-box {
    border: 1px solid $light-gray;
    border-radius: 4px;
    padding: 5px 10px 10px;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    > .content {
      word-break: break-all;
      line-height: 150%;
    }
    > .small {
      width: 80px;
      padding: 0 5px;
      margin: 10px 0 0;
      font-size: 12px;
      align-self: flex-end;
    }
  }
  > .action {
    margin: 50px 0 10px;
  }
  > .tip {
    color: $gray;
    font-size: 12px;
    text-align: center;
  }
}
</style>
